<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>h5_pc_animation</title>
  <script src="js/index.js"></script>
  <link rel="stylesheet" href="css/common.css">
 </head>
 <body>
 	<section id="wrap">
		<!--流体布局-->
		<header id="head">
			<!--固定布局-->
			<div class="headMain">
				<h1 class="logo">
					<a href="javascript:;">
						<img src="img/logo.png">
					</a>
				</h1>
				<div class="music">
					<audio src="img/audio.mp3" loop></audio>
				</div>
				<nav class="nav">
					<ul class="list clearfix">
						<li>
							<a href="javascript:;">
								<div class="up">
									<img src="img/home_gruen.png">
								</div>
								<div class="down">
									<img src="img/home.png">
								</div>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<div class="up">Course</div>
								<div class="down">Course</div>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<div class="up">Works</div>
								<div class="down">Works</div>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<div class="up">About</div>
								<div class="down">About</div>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<div class="up">Team</div>
								<div class="down">Team</div>
							</a>
						</li>
					</ul>
				</nav>
				<div class="arrow"></div>
			</div>
		</header>
		<section id="content">
			<ul class="list">
				<li class="home">
					<section>
						<ul class="home1">
							<li class="commonTitle active">
								<div class="item">one layer</div>
							</li>
							<li class="commonTitle">
								<div class="item">two layer</div>
							</li>
							<li class="commonTitle">
								<div class="item">three layer</div>
							</li>
							<li class="commonTitle">
								<div class="item">four layer</div>
							</li>
						</ul>
						<ul class="home2">
							<li class="active"></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</section>
				</li>
				<li class="course">
					<section>
						<header class="course1 commonTitle">
							<span>EINIGE</span><br>
							<span>UNSERER</span><br>
							<span>KUNDEN</span><br>
						</header>
						<div class="course2 commonText">
							<p>Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann.<br>Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.</p>
						</div>
						<div class="course3">
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<span class="line"></span>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
							<div class="item">
								<div class="face">测试测试测试</div>
								<div class="backFace"></div>
							</div>
						</div>
						<div class="plane1"></div>
						<div class="plane2"></div>
						<div class="plane3"></div>
					</section>
				</li>
				<li class="works">
					<section>
						<header class="works1 commonTitle">
							<span>EINBLICK</span><br>
							<span>ERKENNTNIS</span><br>
							<span>ERGEBNIS</span><br>
						</header>
						<div class="works2 clearfix">
							<div class="item">
								<img src="img/worksimg1.jpg">
								<div class="mask">
									<span>这是第一张图</span>
									<div class="icon"></div>
								</div>
							</div>
							<div class="item">
								<img src="img/worksimg2.jpg">
								<div class="mask">
									<span>这是第二张图</span>
									<div class="icon"></div>
								</div>
							</div>
							<div class="item">
								<img src="img/worksimg3.jpg">
								<div class="mask">
									<span>这是第三张图</span>
									<div class="icon"></div>
								</div>
							</div>
							<div class="item">
								<img src="img/worksimg4.jpg">
								<div class="mask">
									<span>这是第四张图</span>
									<div class="icon"></div>
								</div>
							</div>
						</div>
						<div class="works3"></div>
						<div class="pencel1"></div>
						<div class="pencel2"></div>
						<div class="pencel3"></div>
					</section>
				</li>
				<li class="about">
					<section>
						<header class="about1 commonTitle">
							<span>DIE</span><br>
							<span>SPEZIELLE</span><br>
							<span>VIELFALT</span><br>
						</header>
						<div class="about2">
							<p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
						</div>
						<div class="about3">
							<div class="item">
								<span></span>
								<ul data-src="img/about1.jpg"></ul>
							</div>
							<div class="item">
								<span></span>
								<ul data-src="img/about3.jpg"></ul>
							</div>
						</div>
						<div class="about4"></div>
					</section>
				</li>
				<li class="team">
					<section>
						<header class="team1 commonTitle">
							<span>WIR SIND</span><br>
							<span>VOXELAIR</span><br>
						</header>
						<div class="team2">
							<p class="commonText">Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe.<br>Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.</p>
						</div>
						<div class="team3">
							<ul>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</div>
					</section>
				</li>
			</ul>
			<ul class="dot">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<div id="mask">
			<div class="up"></div>
			<div class="down"></div>
			<div class="line"></div>
		</div>
	</section>
 </body>
</html>
